<template lang="html">
    <div id="div1">
        <div ref="toolbar" class="toolbar">
        </div>
        <div ref="editor" class="text">
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import { ACCESS_TOKEN, USER_DATA } from '@/store/mutation-types';
    import moment from 'moment';
    import { mapGetters, mapState, mapActions } from 'vuex';
    import env from '@/config/env';
    // import Server from '@/config/server';
    // import request from '@/utils/request';
    import axios from 'axios';
    import { showErrors, showError, showSuccess } from '@/utils/showMsg';
    import E from 'wangeditor'
    export default {
        name: 'editoritem',
        data() {
            return {
                // uploadPath,
                editor: null,
                info_: null,
                fileTypeNum: this.fileTypeS,
            }
        },
        model: {
            prop: 'value',
            event: 'change'
        },
        props: {
            value: {
                type: String,
                default: ''
            },
            fileTypeS: {
                type: String,
                default: ''
            },
            isClear: {
                type: Boolean,
                default: false
            }
        },
        watch: {
            isClear(val) {
                // 触发清除文本域内容
                if (val) {
                    this.editor.txt.clear()
                    this.info_ = null
                }
            },
            fileTypeS(value) {
                console.log(value);
            },
            value: function(value) {
                if (value !== this.editor.txt.html()) {
                    this.editor.txt.html(this.value)
                }
            }
            //value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
        },

        mounted() {
            this.seteditor()
            this.editor.txt.html(this.value)
        },
        methods: {
            seteditor() {
                var that = this
                this.editor = new E(this.$refs.toolbar, this.$refs.editor) //多个富文本
                // that.editor = new E('#div1') //单个富文本
                that.editor.config.uploadImgShowBase64 = false // base 64 存储图片
                that.editor.config.uploadImgServer = env.baseURL + 'common/push_img' // 配置服务器端地址(自己更换为自己项目的服务器)
                that.editor.config.uploadImgHeaders = {} // 自定义 header
                that.editor.config.zIndex = 0
                // that.editor.config.uploadFileName = 'file' // 后端接受上传文件的参数名
                // that.editor.config.uploadImgParams = {
                //     fileType: 2,
                // }
                that.editor.config.uploadImgMaxSize = 10 * 1024 * 1024 // 将图片大小限制为 2M
                that.editor.config.uploadImgMaxLength = 1 // 限制一次最多上传 3 张图片
                that.editor.config.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间
                that.editor.config.showFullScreen = true
                // editor.config.colors = []
                // 配置菜单
                that.editor.config.menus = [
                    'head', // 标题
                    'bold', // 粗体
                    'fontSize', // 字号
                    'fontName', // 字体
                    'italic', // 斜体
                    'underline', // 下划线
                    'strikeThrough', // 删除线
                    'indent',
                    'lineHeight',
                    'foreColor', // 文字颜色
                    'backColor', // 背景颜色
                    'link', // 插入链接
                    'list', // 列表
                    'todo', //动作
                    'justify', // 对齐方式
                    'quote', // 引用
                    'emoticon', // 表情
                    'image', // 插入图片
                    'table', // 表格
                    // 'video', // 插入视频
                    'code', // 插入代码
                    'undo', // 撤销
                    'redo', // 重复
                    'splitLine',
                    'fullscreen',
                ]
                that.editor.config.customUploadImg = async (resultFiles, insertImgFn) => {
                    // resultFiles 是 input 中选中的文件列表
                    // insertImgFn 是获取图片 url 后，插入到编辑器的方法
                    // console.log(resultFiles[0]);
                    let NewFormData = new FormData();
                    // const ImgList = resultFiles
                    // ImgList.forEach(file => {
                    //     // console.log(file);
                    //     formData.append('file', file);
                    // });
                    NewFormData.append('file', resultFiles[0]);
                    // NewFormData.append('fileType', that.fileTypeNum);
                    const token = Vue.ls.get(ACCESS_TOKEN);
                    const userid = Vue.ls.get(USER_DATA);
                    axios({
                            method: "POST",
                            url: env.baseURL + 'root/base/uploadfile',
                            data: NewFormData,
                            processData: false,
                            contentType: false,
                            headers: {
                                // Authorization: `Bearer ${token}`
                                'x-token': `${token}`,
                                // 'user-id': `${userid.UserId}`,
                                // 'market-id': `${userid.MarketId}`
                            },
                        })
                        .then((res) => {
                            console.log(res);
                            if (res.data.code == 1) {
                                // console.log(res);
                                var imgUrl = res.data.data.url
                                insertImgFn(imgUrl)
                            } else {
                                showError(res.data.msg)
                            }
                        })
                        .catch((error) => {
                            console.log(error);
                        });
                    // 上传图片，返回结果，将图片插入到编辑器中
                    // insertImgFn(imgUrl)
                }
                // that.editor.config.uploadImgHooks = {
                //         fail: (xhr, editor, result) => {
                //             // 插入图片失败回调
                //         },
                //         success: (xhr, editor, result) => {
                //             // 图片上传成功回调
                //         },
                //         timeout: (xhr, editor) => {
                //             // 网络超时的回调
                //         },
                //         error: (xhr, editor) => {
                //             // 图片上传错误的回调
                //         },
                //         customInsert: (insertImg, result, editor) => {
                //             // 图片上传成功，插入图片的回调
                //             //result为上传图片成功的时候返回的数据，这里我打印了一下发现后台返回的是data：[{url:"路径的形式"},...]
                //             // console.log(result.data[0].url)
                //             //insertImg()为插入图片的函数
                //             //循环插入图片
                //             // for (let i = 0; i < 1; i++) {
                //             console.log(result)
                //             // let url = result.url
                //             //这里插一句, 如果项目在本地开发的,图片在服务器存着的
                //             //在编辑器里面回显的话url要加上ip,ip是看你们开发的时候怎么拿的,
                //             //我们是store存的直接拿来拼接上的
                //             insertImg(url)
                //             // }
                //         }
                //     },
                that.editor.config.fullScreen = (e) => {}, // 全屏
                    that.editor.config.unFullScreen = (e) => {}, // 取消全屏
                    that.editor.config.onchange = (html) => {
                        that.info_ = html // 绑定当前逐渐地值
                        that.$emit('change', that.info_) // 将内容同步到父组件中
                    }
                // 创建富文本编辑器
                that.editor.create()
            },
            // getSrc(html) {
            //     var imgReg = /<img.*?(?:>|\/>)/gi
            //     // 匹配src属性
            //     var srcReg = /src=[\\"]?([^\\"]*)[\\"]?/i
            //     var arr = html.match(imgReg)
            //     let imgs = []
            //     if (arr) {
            //         for (let i = 0; i < arr.length; i++) {
            //             var src = arr[i].match(srcReg)[1]
            //             imgs.push(src)
            //         }
            //     }
            //     return imgs
            // },
        }
    }
</script>

<style lang="less" scoped>
    .editor {
        width: 100%;
        margin: 0 auto;
        position: relative;
        z-index: 0 !important;
    }

    .toolbar {
        border: 1px solid #ccc;
    }

    .text {
        border: 1px solid #ccc;
        min-height: 300px;
        max-height:300px;
        overflow: auto;
    }

    /* table 样式 */
    table {
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
    }

    table td,
    table th {
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        padding: 3px 5px;
    }

    table th {
        border-bottom: 2px solid #ccc;
        text-align: center;
    }

    /* blockquote 样式 */
    blockquote {
        display: block;
        border-left: 8px solid #d0e5f2;
        padding: 5px 10px;
        margin: 10px 0;
        line-height: 1.4;
        font-size: 100%;
        background-color: #f1f1f1;
    }

    /* code 样式 */
    code {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        background-color: #f1f1f1;
        border-radius: 3px;
        padding: 3px 5px;
        margin: 0 3px;
    }

    pre code {
        display: block;
    }

    /* ul ol 样式 */
    ul,
    ol {
        margin: 10px 0 10px 20px;
    }
</style>